<template>
  <view class="content">
    <view class="row b-b">
      <text class="tit">
        收货人
      </text>
      <input
        v-model="addressData.name"
        class="input"
        type="text"
        placeholder="如何称呼您"
        placeholder-class="placeholder"
      >
    </view>
    <view class="row b-b">
      <text class="tit">
        联系电话
      </text>
      <input
        v-model="addressData.mobile"
        class="input"
        type="number"
        placeholder="收货人手机号码"
        :maxlength="11"
        placeholder-class="placeholder"
      >
    </view>
    <view class="row b-b">
      <text class="tit">
        地址
      </text>
      <text
        class="input"
        placeholder="小区/写字楼等"
        @click="location"
      >
        {{ addressData.addressName }}
      </text>
      <text class="yticon icon-shouhuodizhi" />
    </view>
    <view class="row b-b"> 
      <text class="tit">
        楼栋-门牌号
      </text>
      <input
        v-model="addressData.area"
        class="input"
        type="text"
        placeholder="如5幢505室"
        placeholder-class="placeholder"
      >
    </view>
		
    <view class="row default-row">
      <text class="tit">
        设为默认
      </text>
      <switch
        :checked="!!addressData['isDefault']"
        color="#fa436a"
        @change="switchChange"
      />
    </view>
    <button
      class="add-btn"
      @click="confirm"
    >
      保存
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressData: {
        name: '',
        mobile: '',
        addressName: '正泰大厦', // 测试所用
        address: '浙江省杭州市滨江区月明路560号', // 测试所用
        area: '',
        latitude: '',
        longitude: '',
        isDefault: 0
      }
    }
  },
  onLoad(option){
    let title = '新增收货地址'
    if(option.type === 'edit'){
      title = '编辑收货地址'
				
      this.addressData = JSON.parse(option.data)
    }
    this.manageType = option.type
    uni.setNavigationBarTitle({
      title
    })
  },
  methods: {
    switchChange(e){
      this.addressData.isDefault = e.detail.value ? 1 : 0
    },
    // 定位
    location() {
      this.$api.msg('测试数据，不可更改')
    },
    // 获取用户位置
    getUserLocation() {
      const _this = this
      uni.getSetting({
        success(res) {
          if(!res.authSetting['scope.userLocation']) {
            uni.openSetting({
              success(res) {
                if(res.authSetting['scope.userLocation']) {
                  _this.chooseLocation()
                }
              }
            })
          }
          _this.chooseLocation()
        },
        fail(err) {
          console.log(err)
        }
      })
    },
    // 地图选择地址
    chooseLocation(){
      uni.chooseLocation({
        success: (data) => {
          console.log(data)
          this.addressData.addressName = data.name
          this.addressData.address = data.address
          this.addressData.latitude = data.latitude
          this.addressData.longitude = data.longitude
        }
      })
    },
			
    // 提交
    async confirm(){
      const data = this.addressData
      if(!data.name){
        this.$api.msg('请填写收货人姓名')
        return
      }
      if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)){
        this.$api.msg('请输入正确的联系电话')
        return
      }
      if(!data.address){
        this.$api.msg('请在地图选择所在位置')
        return
      }
      if(!data.area){
        this.$api.msg('请填写门牌号信息')
        return
      }

      const params = Object.assign({}, this.addressData)
      params.isDefault = this.addressData.isDefault ? 1 : 0
      if(this.manageType === 'edit') {
        await this.$api.json('editAddress', { ...params })
      } else {
        await this.$api.json('addAddress', { ...params })
      }
      // this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
      this.$api.prePage().refreshList(data, this.manageType)
      this.$api.msg(`地址${this.manageType === 'edit' ? '修改' : '添加'}成功`)
      setTimeout(() => {
        uni.navigateBack()
      }, 800)
    },
  }
}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16rpx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30rpx;
		height: 110rpx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 200rpx;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36rpx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16rpx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16rpx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 60rpx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10rpx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
